<template>
  <div class="page">
    <div class="box b2">b2</div>
    <div class="box b1" :style="style">
      <div class="box-page box-front"></div>
      <div class="box-page box-back"></div>
    </div>
  </div>
  <button @click="add">下往上</button>
  <button @click="add1">上往下</button>
  <button @click="add2">正常</button>
  <button @click="add3">右边走</button>
  <button @click="add4">左边走</button>
</template>
<script>
import { mat4 } from '../../libs/glmatrix/gl-matrix-min.js'
import { gsap } from '../../libs/gsap-3.11.1.min.js'
export default {
  data() {
    return {
      style: {}
    }
  },
  methods: {
    add() {
      let obj = {
        x: 0
      }
      gsap.to(obj, 10, {
        x: 1,
        onUpdate: () => {
          let rad = obj.x * Math.PI * 2
          rad = rad + Math.PI / 2
          let r = 50
          let x = Math.cos(rad) * r
          let z = Math.sin(rad) * r
          let y = 0
          // 定义相机参数
          // 从下往上看
          const eye = [x, 1000, z] // 相机位置 (z 朝向屏幕外)
          const center = [0, 0, 0] // 目标点
          const up = [0, 1, 0] // 上方向

          // 生成视图矩阵 (WebGL 右手坐标系)
          const viewMatrix = mat4.create()
          mat4.lookAt(viewMatrix, eye, center, up)

          // 转换为 CSS matrix3d 字符串
          const matrixArray = Array.from(viewMatrix)
          const cssTransform = `matrix3d(${matrixArray.join(',')})`

          // 应用到元素
          this.style.transform = cssTransform
        }
      })
    },
    add1() {
      let obj = {
        x: 0
      }
      gsap.to(obj, 10, {
        x: 1,
        onUpdate: () => {
          let rad = obj.x * Math.PI * 2
          rad = rad + Math.PI / 2
          let r = 50
          let x = Math.cos(rad) * r
          let z = Math.sin(rad) * r
          let y = 0
          // 定义相机参数
          // 从下往上看
          const eye = [x, -1000, z] // 相机位置 (z 朝向屏幕外)
          const center = [0, 0, 0] // 目标点
          const up = [0, 1, 0] // 上方向

          // 生成视图矩阵 (WebGL 右手坐标系)
          const viewMatrix = mat4.create()
          mat4.lookAt(viewMatrix, eye, center, up)

          // 转换为 CSS matrix3d 字符串
          const matrixArray = Array.from(viewMatrix)
          const cssTransform = `matrix3d(${matrixArray.join(',')})`

          // 应用到元素
          this.style.transform = cssTransform
        }
      })
    },
    add2() {
      let obj = {
        x: 0
      }
      gsap.to(obj, 10, {
        x: 1,
        onUpdate: () => {
          let rad = obj.x * Math.PI * 2
          rad = rad + Math.PI / 2
          let r = 200
          let x = Math.cos(rad) * r
          let z = Math.sin(rad) * r
          let y = 0
          // 定义相机参数
          // 从下往上看
          const eye = [x, 0, z] // 相机位置 (z 朝向屏幕外)
          const center = [-100, 0, 0] // 目标点
          const up = [0, 1, 0] // 上方向

          // 生成视图矩阵 (WebGL 右手坐标系)
          const viewMatrix = mat4.create()
          mat4.lookAt(viewMatrix, eye, center, up)

          // 转换为 CSS matrix3d 字符串
          const matrixArray = Array.from(viewMatrix)
          const cssTransform = `matrix3d(${matrixArray.join(',')})` //只是假设又个追踪，但是实际不影响视图

          // 应用到元素
          this.style.transform = cssTransform
        }
      })
    },
    add3() {
      let obj = {
        x: 0
      }
      gsap.to(obj, 10, {
        x: 1,
        onUpdate: () => {
          let x = 200 * obj.x
          let y = 0
          // 定义相机参数
          // 从下往上看
          const eye = [x, 0, 100] // 相机位置 (z 朝向屏幕外)
          const center = [0, 0, 0] // 目标点
          const up = [0, 1, 0] // 上方向

          // 生成视图矩阵 (WebGL 右手坐标系)
          const viewMatrix = mat4.create()
          mat4.lookAt(viewMatrix, eye, center, up)

          // 转换为 CSS matrix3d 字符串
          const matrixArray = Array.from(viewMatrix)
          const cssTransform = `matrix3d(${matrixArray.join(',')})` //只是假设又个追踪，但是实际不影响视图

          // 应用到元素
          this.style.transform = cssTransform
        }
      })
    },
    add4() {
      let obj = {
        x: 0
      }
      gsap.to(obj, 10, {
        x: 1,
        onUpdate: () => {
          let x = -200 * obj.x
          let y = 0
          // 定义相机参数
          // 从下往上看
          const eye = [x, 0, 100] // 相机位置 (z 朝向屏幕外)
          const center = [0, 0, 0] // 目标点
          const up = [0, 1, 0] // 上方向

          // 生成视图矩阵 (WebGL 右手坐标系)
          const viewMatrix = mat4.create()
          mat4.lookAt(viewMatrix, eye, center, up)

          // 转换为 CSS matrix3d 字符串
          const matrixArray = Array.from(viewMatrix)
          const cssTransform = `matrix3d(${matrixArray.join(',')})` //只是假设又个追踪，但是实际不影响视图

          // 应用到元素
          this.style.transform = cssTransform
        }
      })
    }
  },
  mounted() {
    //this.add()
  }
}
</script>
<style type="text/css" lang="scss">
.page {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  right: 100px;
  border: 1px solid #000;
  background: #fff;
  box-sizing: border-box;
  transform-style: preserve-3d;
  top: 100px;
  &.b2 {
    top: 300px;
    transform: rotatey(10deg);
  }
  &.b1 {
    z-index: 1;
    background: grey;
  }
  &-page {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  &-front {
    background: url('../../images/page-1.jpg') 0 0 / 100% 100% no-repeat;
    transform: translatez(1px);
  }
  &-back {
    background: url('../../images/page-5.jpg') 0 0 / 100% 100% no-repeat;
    transform: scale(-1, 1) translatez(0px);
  }
}
</style>
